<template>
    <div >
        <Input   search  placeholder="根据组织名称搜索..." @on-search="getOrganizeByOrgNameData"/>
        <div style="width: 100%;border: 1px solid #C5C8CE;margin-top: 10px;padding: 5px;">
            <Icon type="md-list"/>
            <span style="margin-left: 8px;">组织机构</span>
            <span style="margin-right: 5px">
            <Dropdown style="margin-right: 5px;float: right;" @on-click="onOrgDropdown">
                <a href="javascript:void(0)">
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem name="addOrg"><Icon type="md-add"/>添加部门</DropdownItem>
                    <DropdownItem name="importOrg">导入组织机构</DropdownItem>
                    <DropdownItem disabled>豆汁儿</DropdownItem>
                    <DropdownItem>冰糖葫芦</DropdownItem>
                    <DropdownItem divided>北京烤鸭</DropdownItem>
                </DropdownMenu>
            </Dropdown>
                </span>
        </div>
        <div style="border: 1px solid #C5C8CE;">
            <Tree :data="organizeData" ref="tree" @on-select-change="clickTreeNode"></Tree>
        </div>
        <Modal
                v-model="isModalOrgInfo"
                title="新建组织机构"
                okText="保存"
                cancelText="关闭"
                :mask-closable="false"
                @on-ok="okModalOrgInfo"
                @on-cancel="cancelModalOrgInfo">

            <v-organize-info ref="organizeInfo" v-on:listenToChildEvent="getOrganizeOrgIdData"></v-organize-info>

        </Modal>

        <Modal
                v-model="isModalImportExcelOrg"
                title="导入组织机构"
                okText="确定"
                cancelText="关闭"
                :mask-closable="false"
                @on-ok="cancelModalImportExcelOrg"
                @on-cancel="cancelModalImportExcelOrg">

            <v-import-excel-org ref="importExcelOrg" v-on:listenToChildEvent="getOrganizeOrgIdData"></v-import-excel-org>

        </Modal>
    </div>
</template>
<script>
    import organizeInfo from './OrganizeInfo';
    import importExcelOrg from './ImportExcelOrg'
    import vueEvent from '../../../../public/js/vueEvent.js'
    export default {
        name: "OrganizeTree",
        data() {
            return {
                organizeData: [],
                organizes: [],
                isModalOrgInfo: false,
                isModalImportExcelOrg: false
            }
        },
        methods: {
            //获取组织机构数据
            getOrganizeData() {
                var self = this;
                self.$http.get('/core/organizeInfo/queryOrganizeTree').then(function (response) {
                    var data = self.common.handleData(response.data, self);
                    self.organizeData = data;
                }).catch(function (error) {
                    console.log(error);
                });
                
            },
            getOrganizeOrgIdData(orgId) {
                var self = this;
                self.$http.get('/core/organizeInfo/queryOrganizeOrgIdTree', {
                    params: {
                        orgId: orgId
                    }
                }).then(function (response) {
                    var data = self.common.handleData(response.data, self);
                    self.organizeData = data;

                }).catch(function (error) {
                    console.log(error);
                });

            },
            //根据组织机构名称搜索名称
            getOrganizeByOrgNameData(orgName){
                var self = this;
                self.$http.get('/core/organizeInfo/queryOrganizeTreeLikeName', {
                    params: {
                        orgName: orgName
                    }
                }).then(function (response) {
                    var data = self.common.handleData(response.data, self);
                    self.organizeData = data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //添加组织机构
            addOrganize() {
                let self = this;
                let nodes = self.$refs.tree.getSelectedNodes();
                if (undefined == nodes[0]) {
                    self.$Message.error({
                        content: '请选择一个机构，添加其子机构',
                        duration: 5
                    });
                    return;
                }
                self.$refs.organizeInfo.organizeInfo.orgParentId = nodes[0].id;
                self.isModalOrgInfo = true;
            },
            //保存组织机构
            okModalOrgInfo() {
                let self = this;
                self.$refs.organizeInfo.saveOrganizeInfo();
            },
            //关闭保存组织机构
            cancelModalOrgInfo() {
                let self = this;
                self.$refs.organizeInfo.resetOrganizeInfo();
            },
            onOrgDropdown(dropdownName) {
                let self = this;
                switch (dropdownName) {
                    //添加组织机构
                    case 'addOrg':
                        self.addOrganize();
                        break;
                    //Excel导入组织机构
                    case 'importOrg':
                        self.importOrg();
                        break;
                    default:

                }
            },
            importOrg() {
                let self = this;
                self.isModalImportExcelOrg = true;
            },
            cancelModalImportExcelOrg() {
                let self = this;
                self.$refs.importExcelOrg.clearFilesOrg();
                self.getOrganizeData();
            },
            clickTreeNode(node){
                vueEvent.$emit('getUsersList',node[0].id);
            }

        },
        mounted() {
            this.getOrganizeData();
        },
        components: {
            'v-organize-info': organizeInfo,
            'v-import-excel-org': importExcelOrg
        }

    }
</script>

<style scoped>

</style>



